<template>
  <div class="container">
    <div class="randomscard">
      <el-card style="margin-top: 10px">
        <el-form ref="form" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input v-model="data.keyword"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18" style="text-align: right">
              <el-button size="small" @click="clear">清除</el-button>
              <el-button size="small" type="primary" @click="search()"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </el-form>
        <el-alert
          :title="'数据一共' + total + '条'"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>

        <template>
          <el-table
            :data="list"
            style="width: 100%; margin-top: 10px"
            :header-cell-style="{
              backgroundColor: '#fafafa',
              borderBottom: ' 2px solid #e8e8e8',
            }"
          >
            <el-table-column prop="id" label="编号" fixed width="200">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="70">
              <template #default="{ row }">
                <p v-if="row.questionType === '1'">单选</p>
                <p v-else-if="row.questionType === '2'">多选</p>
                <p v-else>简答</p>
              </template>
            </el-table-column>
            <el-table-column label="题目编号" width="200">
              <template #default="{ row }">
                <div v-for="(item, index) in row.questionIDs" :key="index">
                  <p class="number" @click="hLook(item)">
                    {{ item.number }}
                  </p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="addTime" label="录入时间" width="180">
            </el-table-column>
            <el-table-column
              prop="totalSeconds"
              label="答题时间(s)"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="accuracyRate" label="真确率(%)" width="180">
            </el-table-column>
            <el-table-column prop="userName" label="录入人" width="150">
            </el-table-column>
            <el-table-column prop="operation" label="操作" #default="{ row }">
              <el-button
                class="buttonstyle"
                type="danger"
                icon="el-icon-delete"
                circle
                @click="hDel(row)"
              ></el-button>
            </el-table-column>
          </el-table>
        </template>

        <!-- 分页功能 -->
        <el-row style="margin-top: 20px; text-align: right">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="data.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="data.pagesize"
            layout="prev,pager,next,sizes,jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </el-card>
      <!-- 题目编号的弹层 -->
      <el-dialog title="题目预览" width="900px" :visible.sync="isShow">
        <template>
          <div class="container">
            <el-row class="text">
              <el-col :span="6">
                <span>【题型】：{{ obj.label }}</span>
              </el-col>
              <el-col :span="6">
                <span> 【编号】：{{ questionItem.id }}</span>
              </el-col>
              <el-col :span="6">
                <span>【难度】：{{ obj2.label }}</span>
              </el-col>
              <el-col :span="6">
                <span> 【标签】：{{ questionItem.tags }}</span>
              </el-col>
            </el-row>
            <el-row class="text">
              <el-col :span="6">
                <span>【学科】：{{ questionItem.subjectName }}</span>
              </el-col>
              <el-col :span="6">
                <span>【目录】：{{ questionItem.directoryName }}</span>
              </el-col>
              <el-col :span="6">
                <span>【方向】：{{ questionItem.direction }}</span>
              </el-col>
              <el-col :span="6"> </el-col>
            </el-row>
            <hr />
            <el-row>
              <el-col>
                <span>【题干】：</span>
                <div class="questionstem" v-html="questionItem.question"></div>
                <el-row>
                  <el-col>
                    {{ obj.label }}选项：（以下选中的选项为正确答案）
                  </el-col>
                </el-row>
                <div v-for="item in questionItem.options" :key="item.id">
                  <el-radio-group v-model="item.isRight">
                    <el-radio v-if="obj.label === '单选'" :label="1">
                      {{ item.title }}
                    </el-radio>
                  </el-radio-group>
                  <el-checkbox-group
                    v-model="check"
                    v-if="obj.label === '多选'"
                  >
                    <el-checkbox :label="item.isRight">{{
                      item.title
                    }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-col>
            </el-row>
            <hr />
            【参考答案】：<el-button type="danger" @click="isVideoShow = true"
              >视频答案预览</el-button
            >
            <el-row style="margin-top: 20px" v-if="isVideoShow">
              <video
                :src="questionItem.videoURL"
                controls="controls"
                class="video"
              ></video>
            </el-row>
            <hr />
            <el-row class="answer">
              <span>【答案解析】: {{ questionItem.remarks }}</span>
            </el-row>
            <hr />
            <el-row class="answer">
              <span>【题目备注】: {{ questionItem.remarks }}</span>
            </el-row>
            <el-row class="buttonstyle">
              <el-button type="primary" @click="$emit('close')">关闭</el-button>
            </el-row>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import { questionType, difficulty } from '../../api/hmmm/constants'
export default {
  data () {
    return {
      list: [],
      // 查询信息
      data: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      total: 0,
      isShow: false, // 控制编号预览弹层
      // 预览数据
      questionItem: {},
      // 枚举数据
      obj: {},
      obj2: {},
      isVideoShow: false, // 控制视频弹层
      // 题干多选
      check: [1]
    }
  },
  created () {
    this.loadRandoms()
  },
  methods: {
    // 获取信息
    async loadRandoms () {
      try {
        const res = await randoms(this.data)
        // console.log(res, 'randoms')
        if (res.status !== 200) return this.$message.error('数据信息有误')
        this.$message.success('获取信息成功')
        this.list = res.data.items
        this.total = res.data.counts
      } catch (error) {
        console.log(error)
      }
    },
    // 清除
    clear () {
      this.data.keyword = ''
      this.data.page = 1
      this.loadRandoms()
    },
    // 搜索
    search () {
      this.data.page = 1
      this.loadRandoms()
    },
    // 删除
    async hDel (row) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await removeRandoms(row)
          console.log(res, 'removeRandoms')
          this.$message.success('删除成功')
          this.loadRandoms()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 题目编号的预览
    async hLook (item) {
      // console.log(item)
      try {
        const res = await detail(item)
        console.log(res, 'detail')
        this.questionItem = res.data
        this.isShow = true
        this.QuestionType()
      } catch (error) {
        this.$message.info('数据未找到')
        console.log(error)
      }
    },
    // 枚举
    QuestionType () {
      const type = questionType.find(
        (item) => item.value === +this.questionItem.questionType
      )
      // console.log(type)
      this.obj = type
      const diffit = difficulty.find(
        (item) => item.value === +this.questionItem.difficulty
      )
      // console.log(diffit)
      this.obj2 = diffit
    },
    // 页码变化
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.data.pagesize = val
      this.data.page = 1
      this.loadRandoms()
    },
    // 当前页变化
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.data.page = val
      this.loadRandoms()
    }
  }
}
</script>

<style scoped lang="scss">
.randomscard {
  .keyword {
    font-size: 14px;
    font-weight: bold;
    color: #606266;
    margin-left: 40px;
    padding-right: 15px;
  }
  .buttonstyle {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
  }
  .number {
    color: #09f;
    cursor: pointer;
    line-height: 10px;
  }
}
.container {
  .el-row {
    .el-col {
      span {
        font-size: 14px;
        color: #606266;
        line-height: 30px;
      }
    }
  }
  .answer {
    padding: 8px 0px;
  }
  .buttonstyle {
    text-align: right;
  }
  .questionstem{
    color: #4b4bff;
  }
}
</style>
